<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="APP水印设置：" prop="watermark">
        <image-upload
          :limit="1"
          @input="handleInput"
          :value="imageValue">
        </image-upload>
      </el-form-item>
      
    </el-form>
    <div slot="footer" class="dialog-footer" style="margin-top: 50px;">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
  </div>
</template>
<script>
  import { getAppSetting, saveAppSetting } from '@/api/shuiyin/shuiyin.js';
  export default {
    data() {
      return {
        imageValue: [],
        form: {
          id: '',
          watermark: ''
        },
        rules: {
          watermark: [{ required: true, message: "APP水印不能为空", trigger: "change" }]
        }
      }
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        getAppSetting().then(response => {
          console.log(response);
          if (response.status === 200 && response.data) {
            this.form.watermark = response.data.watermark;
            this.form.id = response.data.id;
            this.imageValue = [this.form.watermark]
          } else {
            this.imageValue = [];
          }
        })
      },
      handleInput(event) {
        this.form.watermark = event;
      },
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            saveAppSetting(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.init()
            })
          }
        })
      },
      reset() {
        this.form.watermark = '';
        this.imageValue = []
      }
    }
  }
</script>